<template>
<div class="h5-channel views-container">
  <div class="wlm-table">
    <div class="warning">
      <div class="flex-row flex-justify-b flex-align-c">
        <div>
          <p class="warning-title">H5</p>
          <p style="margin-top:10px;">开通H5渠道，自动生成H5页面</p>
        </div>
        <el-switch v-model="formFormatData.formData.channel.h5.switch" @change="switchChannel" active-value="1" inactive-value="0">
          </el-switch>
      </div>
    </div>

    <div class="wlm-form">
      <!-- <div class="wlm-channel-card bg-1">
                <div class="card-header">
                    <img src="@/assets/form_ui/wechat.png" alt="" class="logo">
                    <p class="title">绑定微信公众号，把店铺和微信进行数据打通<em>已绑定</em></p>
                    <p class="info">您的店铺已获得该公众号的所有接口权限，可以正常对接微信 <br>如果使用中发现接口有异常，请点此<a class="primary-text"> 重新授权</a> <br> <span>手动授权请<a class="primary-text" style="position: relative;">点此测试</a>是否成功</span></p>
                </div>
            </div> -->
      <section>
        <div class="wlm-form-content channel-card">
          <el-form :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="140px" class="retail-form" label-position="right">
            <!-- <el-form-item label="H5名称" prop="username">
              <span>{{formFormatData.formData.name}}</span>
            </el-form-item>
            <el-form-item label="开通状态" prop="password">
              <span>{{formFormatData.formData.switch === '1'?'开通':'关闭'}}</span>
            </el-form-item> -->
            <el-form-item label="H5网址" v-if="formFormatData.formData.channel.h5 && formFormatData.formData.channel.h5.url">
              <el-button type="text" @click="handleClipboard(formFormatData.formData.channel.h5.url,$event)">{{formFormatData.formData.channel.h5.url}}</el-button>
              <p class="form-help">点击链接复制H5网址</p>
            </el-form-item>
            <!-- <template v-if="formFormatData.formData.channel.h5 && formFormatData.formData.channel.h5.authorizedAddress">
                <el-form-item label="支付授权地址">
                    <el-button style="display: block;margin-left:0;" v-for="(item, index) in formFormatData.formData.channel.h5.authorizedAddress" :key="index" type="text" @click="handleClipboard(item,$event)">{{item}}</el-button>
                    <p class="form-help">点击复制首页链接</p>
                </el-form-item>
            </template> -->
            <el-form-item label="二维码" class="slider">
                <img class="wlm-upload-img" style="width:150px;height:150px;" :src="formFormatData.formData.channel.h5.qrcode?formFormatData.formData.channel.h5.qrcode:`${require('@/assets/custorm_style/default_picture.png')}`">
            </el-form-item>
          </el-form>
          <!-- <div v-else class="status-main pos-center">
                        <p class="status-main-title">暂未接入，请先接入您的H5</p>
                        <div class="flex-row flex-justify-c">
                            <div class="flex-col">
                                <router-link tag="span" to="/channel/h5ChannelAdd">
                                    <el-button class="status-main-btn" type="success" style="background:rgb(104, 211, 135);border:none;"><i><svg-icon class="status-main-svg" icon-class="wechat"/></i>&nbsp; 立即接入</el-button>
                                </router-link>
                                <div class="flex-row flex-justify-e mar-top-4">
                                    <div>没有H5，去<router-link tag="span" to="/user/managementUser">
                                            <el-button type="text" size="small" class="text-danger">注册</el-button>
                                        </router-link>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> -->
        </div>
      </section>
    </div>
  </div>
</div>
</template>

<script>
import {
  channelGet,
  channelSave
} from '@/api/channel'
import clipboard from '@/utils/clipboard'
import waves from '@/directive/waves' // Waves directive
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Form')],
  name: 'H5Channel',
  components: {

  },
  directives: {
    waves
  },
  data() {
    return {
      formFormatData: {
        key: 'H5Channel',
        api: {
          editForm: {
            api: channelGet,
            params: {
              type: 'h5',
              always: true
            }
          },
          submitForm: channelSave
        },
        autofocusType: 1,
        formData: {
          type: 'h5',
          channel: {
            h5: {
              switch: '0'
            }
          }
        },
        rules: {

        }
      }
    }
  },
  created() {

  },
  methods: {
    handleClipboard(text, event) {
      clipboard(text, event)
    },
    switchChannel() {
      channelSave(this.formFormatData.formData).then((res) => {
        const { data: { code } } = res
        if (code === 1) {
          this.$message.success('保存成功！~')
        }
      })
    }
  }
}
</script>
